<template>
	<view class="p_bg_all p_bg_f3">
		<view class="list_wrapper">
			<view class="p_flex list_top">
				<image src="https://dy.sykj365.com/uploads/mini/wenjianjia.png" class="p_img_46 p_margin_r_8"></image>
				<view class="p_flex_1 p_flex" v-if="!isEdit">
					<view class="p_font_32 p_flex_1">{{detailInfo.name}}</view>
					<image src="https://dy.sykj365.com/uploads/mini/bianji@2x.png" class="p_img_32 p_margin_l_16"
						style="margin-top: 7rpx;" @click="isEdit = true"></image>
				</view>
				<view class="p_flex_1 p_flex top_wrapper" v-else>
					<input v-model="detailInfo.name" class="p_font_24" />
					<view class="p_btn" @click="isEdit = false">
						<view>保存</view>
					</view>
				</view>
			</view>
			<view class="p_font_26 p_flex9 p_margin_t_24">
				<view>共{{listData.length}}个文件</view>
			</view>
			<view class="main">
				<view class="list_content" v-for="(item, index) in listData" :key="item.id">
					<view class="p_font_26 p_color_7a p_margin_r_8">{{index + 1}}</view>
					<view class="p_flex_1 p_flex">
						<view class="p_margin_r_16">
							<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" class="p_img_48"></image>
						</view>
						<view class="p_flex_1" style="width: 0; word-wrap: break-word;">
							<view class="p_font_26">{{item.name}}</view>
							<view class="p_font_20 p_color_b2 p_margin_t_8" v-if="!item.paper">
								请设置打印参数
							</view>
							<view class="p_font_20 p_color_b2 p_margin_t_8" v-else>
								{{item.brand}}/{{item.paper}}/{{item.colour}}/{{getD(item.single_double)}}/{{item.binding_type}}{{getType(item)}}{{item.reduction_printing?'/' + item.reduction_printing: ''}}/{{item.num}}份{{item.print_range?'/' + item.print_range: ''}}
							</view>
						</view>
					</view>
					<image src="https://dy.sykj365.com/uploads/mini/cha1@2x.png" class="p_img_48 shanchu" @click="getDel(index)">
					</image>
				</view>
			</view>
		</view>
		<view class="p_bottom_fix" style="background-color: transparent;">
			<view class="p_btn" @click="getSave">
				<view>完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				listData: [],
				isEdit: false,
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$http.post(this.$api.shareDetail, {
					code: this.id
				}).then(res => {
					this.detailInfo = res.data;
					this.listData = res.data.detail;
				})
			},
			getD(e) {
				if (e == 0) return '单面';
				if (e == 1) return '双面';
				if (e == '') return '';
			},
			getType(item) {
				let t_ = [];
				let s_ = '';
				if (item.cover_type) t_.push(item.cover_type)
				if (item.film_covering) t_.push(item.film_covering)

				if (t_.length > 0) {
					s_ = (t_.join('·'))
				}

				return s_
			},
			getDel(i) {
				this.listData.splice(i, 1);
			},
			getSave() {
				let name = this.detailInfo.name;
				let ids = [];
				
				this.listData.forEach((n, k) => {
					ids.push(n.id)
				})
				
				this.$http.post(this.$api.shareEdit, {
					id: this.detailInfo.id,
					name: name,
					ids: ids.toString()
				}).then(res => {
					getApp().getMsg('修改完成', 'success');
					getApp().getBack();
					uni.setStorageSync('share', true);
				})
			}
		}
	}
</script>

<style lang="less">
	.list_wrapper {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 32rpx;
		padding: 32rpx;
	}

	.list_top {
		padding: 0 0 32rpx 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.top_wrapper {
		input {
			height: 46rpx;
			min-height: 46rpx;
			line-height: 46rpx;
			box-sizing: border-box;
			border: 1px solid #05B570;
			border-radius: 32rpx;
			padding: 0 16rpx;
			flex: 1;
		}

		.p_btn {
			width: 110rpx;
			height: 46rpx;
			margin: 0 0 0 16rpx;

			view {
				font-size: 24rpx;
			}
		}
	}

	.list_content {
		margin: 32rpx 0;
		border-radius: 16rpx;
		background-color: rgba(5, 181, 112, 0.03);
		padding: 32rpx 100rpx 32rpx 32rpx;
		display: flex;
		position: relative;

		.shanchu {
			top: 20rpx;
			right: 20rpx;
			position: absolute;
		}
	}

	.main {
		max-height: calc(100vh - 570rpx);
		overflow-y: auto;
	}
</style>